<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    .header-box {
      width: 100%;
      height: 30px;
      background: #e3e4e5;
      font-size: 12px;
      color: #999;
    }

    .header-content {
      background: #e3e4e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1190px;
      height: 30px;
      margin: 0 auto;
    }

    .nav-left {
      display: flex;
      align-items: center;
      width: 80px;
      height: 30px;
      line-height: 30px;
    }

    .position-icon {
      width: 16px;
      height: 16px;
      background-image: url('./images/position.png');
      margin-right: 5px;
    }

    .nav-right {
      display: flex;
      align-items: center;
    }
    
    .nav-right b {
      width: 1px;
      height: 15px;
      background: #ccc;
      margin: 0 5px;
    }

    .nav-right > div {
      width: 80px;
      text-align: center;
      line-height: 28px;
    }

    .nav-right > div:first-child {
      width: 150px;
    }

    .dropdown-box {
      height: 29px;
      line-height: 29px;
      border: 1px solid transparent;
      border-bottom: none;
    }

    .dropdown-box:hover {
      background: #fff;
      border: 1px solid #ddd;
      border-bottom: none;
    }

    .dropdown-box:hover .dropdown-btn {
      background: #fff;
    }

    .dropdown-box:hover .dropdown-menu {
      display: block;
    }

    .dropdown-menu {
      width: 200px;
      height: 115px;
      border: 1px solid #ddd;
      /* border: 1px solid red; */
    }

    .dropdown-box {
      position: relative;
    }

    .dropdown-btn {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 100%;
      /* background: #ffffff; */
      z-index: 1;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 27px;
      left: -1px;
    }

    .logo-content {
      width: 100%;
      height: 140px;
      border-bottom: 1px solid #ddd;
    }

    .search-container {
      display: flex;
      align-items: center;
      width: 1190px;
      height: 100%;
      margin: 0 auto;
    }

    .logo-box {
      width: 190px;
      height: 120px;
    }

    .logo-box img {
      width: 100%;
      height: 100%;
    }

    .search-nav-container {
      width: 810px;
      height: 140px;
    }

    .top-box {
      display: flex;
      padding-top: 20px;
    }

    .search-input-box {
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 2px;
      width: 550px;
      height: 36px;
      background: #e1251b;
      box-sizing: border-box;
      margin-left: 20px;
    }
 
    .search-input-box input {
      outline: none;
      width: 450px;
      border: none;
      height: 32px;
      padding: 0;
    }

    .search-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 36px;
    }

    .search-btn:hover {
      background-color: #c81623;
    }

    .search-btn .icon {
      width: 20px;
      height: 22px;
      background-image: url('./images/fangdajing.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .creame-icon {
      position: absolute;
      top: 50%;
      right: 110px;
      width: 24px;
      height: 20px;
      background-image: url(./images/icon.png);
      background-repeat: no-repeat;
      transform: translate(0, -50%);
      background-position: 0 -49px;
    }

    .creame-icon:hover {
      background-position: 0 -73px;
    }

    .shop-car-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 36px;
      background: #fff;
      border: 1px solid #EEE;
      font-size: 12px;
      color: #c81623;
      margin-left: 30px;
    }

    .shop-car-box:hover {
      border-color: #c81623;
    }

    .shop-icon {
      position: relative;
      width: 16px;
      height: 18px;
      background-image: url('./images/shopcar.png');
      background-repeat: no-repeat;
      margin-right: 15px;
    }

    .shop-icon span {
      border-radius: 8px;
      font-size: 12px;
      background-color: #c81623;
      position: absolute;
      top: -10px;
      right: -15px;
      padding: 0 5px;
      color: #fff;
    }

    .center-box {
      list-style: none;
      display: flex;
      padding: 0;
      margin: 5px 0 0 20px;
      font-size: 10px;
      color: #999;
    }

    .center-box li {
      margin-right: 10px;
    }

    .center-box li:hover {
      color: #c81623;
      cursor: pointer;
    }

    .bottom-box {
      list-style: none;
      display: flex;
      padding: 0;
      margin: 20px 0 0 20px;
      color: #333;
    }

    .bottom-box li {
      margin-right: 20px;
    }

    .bottom-box li:first-child {
      color: #c81623;
      font-weight: bold;
    }

    .bottom-box li:nth-child(2) {
      color: #c81623;
      font-weight: bold;
    }

    .banner {
      width: 190px;
      height: 120px;
    }

    .banner img {
      width: 100%;
      height: 100%;
    }

  </style>
</head>
<body>
  <div class="header-box">
    <div class="header-content">
      <div class="nav-left">
        <span class="position-icon"></span>
        <span>江苏</span>
      </div>

      <div class="nav-right">
        <div>你好，请登录 免费注册</div>
        <b></b>
        <div>我的订单</div>
        <b></b>
        <div>我的京东</div>
        <b></b>
        <div>京东会员</div>
        <b></b>
        <div class="dropdown-box">
          <div class="dropdown-btn">企业采购</div>

          <div class="dropdown-menu"></div>
        </div>
        <b></b>
        <div>客户服务</div>
        <b></b>
        <div>网站导航</div>
        <b></b>
        <div>手机京东</div>
      </div>
    </div>
  </div>

  <div class="logo-content">
    <div class="search-container">
      <!-- logo -->
      <div class="logo-box">
        <img src="./images/left.gif" alt="">
      </div>

      <div class="search-nav-container">
        <div class="top-box">
          <div class="search-input-box">
            <input type="text">

            <div class="search-btn">
              <span class="icon"></span>
            </div>

            <div class="creame-icon"></div>
          </div>

          <div class="shop-car-box">
            <div class="shop-icon">
              <span>0</span>
            </div>

            <div>我的购物车</div>
          </div>
        </div>

        <ul class="center-box">
          <li>二手手机节</li>
          <li>二手手机节</li>
          <li>二手手机节</li>
          <li>二手手机节</li>
          <li>二手手机节</li>
          <li>二手手机节</li>
          <li>二手手机节</li>
        </ul>

        <ul class="bottom-box">
          <li>秒杀</li>
          <li>优惠券</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
          <li>品牌闪购</li>
        </ul>
      </div>

      <div class="banner">
        <img src="./images/Right.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>